
{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

    </head>

    <body>
        <!-- canvas，画布，大小设置为w=395px,h=472px是因为棋盘图片大小为395 x 472像素 -->
        <canvas id="can" width="395px" height="472px">
        
        </canvas>
        {{ room_name|json_script:"room-name" }}
        {{ user_name|json_script:"user-name" }}
        {{ color|json_script:"color" }}
        <script>
            var chatSocket;
            var roomName;
            var userName;
            var color;

            var flag = true;

            var c = document.getElementById("can");

            var ctx = c.getContext("2d");

            var pic = new Image();
            pic.src = "{% static "images/Table.bmp" %}";

            pic.onload = function(){

                ctx.drawImage(pic,0,0);
            }


            function drow_chess(x,y,color){
                if(x < 0 || x > 14 || y < 0 || y > 14){
                    return;
                }else{
                    ctx.beginPath();
                    ctx.arc(12 + x*25 + 12, 84 + y*25 + 12, 12, 0, 2*Math.PI);
                    ctx.closePath();
                    ctx.fillStyle = color;
                    ctx.fill();
                }
               
            }

            function send_pos(x,y,color){
                chatSocket.send(JSON.stringify({
                    "type":"step",
                    "pos":{"x":x, "y":y},
                    "color":color,
                    'room':roomName,
                    'user':userName,
                }));
            }



            c.onmouseup = function(e){
                console.log(e.offsetX, e.offsetY)
                
                var x = Number.parseInt((e.offsetX - 12) / 25) ;
                
                var y = Number.parseInt((e.offsetY - 84) / 25) ;

                //drow_chess(x,y,'white')
                send_pos(x,y,color);

                
            }



            //websocket 代码部分
            roomName = JSON.parse(document.getElementById('room-name').textContent);
            userName = JSON.parse(document.getElementById('user-name').textContent);
            color = JSON.parse(document.getElementById('color').textContent);
            
            chatSocket = new WebSocket(
                'ws://'
                + window.location.host
                + '/chess/'
                + 'play'
                + '/'
            );

            chatSocket.onopen = function(){
                chatSocket.send(JSON.stringify({
                    "type":"join",
                    "color":color,
                    'room':roomName,
                    'user':userName,
                }));
            }

            chatSocket.onmessage = function(e) {
                const data = JSON.parse(e.data);
                if(data.type == 'step'){
                    var x = data.pos.x;
                    var y = data.pos.y;
                    drow_chess(x, y, data.color);
                }
                
            };


            chatSocket.onclose = function(e) {
                console.error('Chat socket closed unexpectedly');
            };

            // document.querySelector('#chat-message-input').focus();
            // document.querySelector('#chat-message-input').onkeyup = function(e) {
            //     if (e.keyCode === 13) {  // enter, return
            //         document.querySelector('#chat-message-submit').click();
            //     }
            // };

            // document.querySelector('#chat-message-submit').onclick = function(e) {
            //     const messageInputDom = document.querySelector('#chat-message-input');
            //     const message = messageInputDom.value;
            //     chatSocket.send(JSON.stringify({
            //         'message': message
            //     }));
            //     messageInputDom.value = '';
            // };
        </script>
    </body>
</html>